<template>
  <div class="lesson-library-container">
    <!-- 顶部新建课件按钮 -->
    <div class="header-bar">
      <div class="header-title">课件库管理</div>
      <div class="header-actions">
        <el-button type="primary" @click="openCreateForm">
          <i class="el-icon-plus"></i> 新建课件
        </el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧导航栏 -->
      <div class="sidebar">
        <div class="select-area">
          <div class="cascade-select">
            <el-popover
              placement="bottom-start"
              width="400"
              trigger="click"
              popper-class="cascade-popover"
              v-model="popoverVisible"
            >
              <div class="popover-content">
                <div class="category-row category-border">
                  <div class="category-label">年段：</div>
                  <div class="category-options">
                    <span
                      v-for="item in lessonList"
                      :key="item.id"
                      :class="['category-item', { active: selectedLevel === item.id }]"
                      @click="handleLevelSelect(item.id)"
                    >
                      {{ item.name }}
                    </span>
                  </div>
                </div>

                <div class="category-row category-border">
                  <div class="category-label">学科：</div>
                  <div class="category-options">
                    <span
                      v-for="subject in currentSubjects"
                      :key="subject.id"
                      :class="['category-item', { active: selectedSubject === subject.id }]"
                      @click="handleSubjectSelect(subject.id)"
                    >
                      {{ subject.name }}
                    </span>
                  </div>
                </div>

                <div class="category-row" v-if="selectedLevel && selectedLevel < 10">
                  <div class="category-label">{{ gradeDisplayText }}：</div>
                  <div class="category-options">
                    <span
                      v-for="grade in currentGrades"
                      :key="grade.id"
                      :class="['category-item', { active: selectedGrade === grade.id }]"
                      @click="handleGradeSelect(grade.id)"
                    >
                      {{ grade.name }}
                    </span>
                  </div>
                </div>
              </div>
              <template #reference>
                <div class="cascade-header">
                  <div class="selected-path">{{ getLevelName() }} > {{ getSubjectName() }}</div>
                </div>
              </template>
            </el-popover>
          </div>

          <!-- 章节列表 -->
          <div class="chapter-section">
            <div class="chapter-title">章节：</div>
            <div class="chapter-list">
              <div v-for="chapter in currentChapters" :key="chapter.id" class="chapter-wrapper">
                <div
                  :class="['chapter-item', { active: selectedChapter === chapter.id }]"
                  @click="handleChapterSelect(chapter)"
                >
                  <div class="chapter-content">
                    <i class="el-icon-document"></i>
                    {{ chapter.name }}
                  </div>

                  <i
                    :class="[
                      isChapterExpanded(chapter.id) ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                      'expand-icon',
                    ]"
                    @click.stop="toggleChapterExpand(chapter.id)"
                  ></i>
                </div>

                <!-- 课程列表 -->
                <div v-if="isChapterExpanded(chapter.id)" class="course-list">
                  <div
                    v-if="loadingCourses && loadingChapterId === chapter.id"
                    class="course-loading"
                  >
                    <i class="el-icon-loading"></i> 加载中...
                  </div>
                  <div
                    v-else-if="
                      !chapterCoursesMap[chapter.id] || chapterCoursesMap[chapter.id].length === 0
                    "
                    class="course-empty"
                  >
                    暂无课程
                  </div>
                  <div
                    v-else
                    v-for="course in chapterCoursesMap[chapter.id]"
                    :key="course.id"
                    class="course-item"
                    @click="handleCourseSelect(course)"
                  >
                    <i class="el-icon-tickets"></i>
                    {{ course.coursewareName || course.title }}
                  </div>
                </div>
              </div>

              <!-- 空状态提示 -->
              <div class="empty-state" v-if="!currentChapters.length">
                <i class="el-icon-document"></i>
                请先选择年段、学科和学期
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="content">
        <div class="lesson-cards">
          <div
            class="lesson-card"
            v-for="item in coursewareList"
            :key="item.id"
            @click="handleClick(item)"
          >
            <div class="lesson-icon">
              <i class="el-icon-document"></i>
            </div>
            <div class="lesson-title">{{ item.coursewareName }}</div>
            <div class="lesson-info">
              <div></div>
              <span>{{ formatDate(item.createTime) }}</span>
            </div>
          </div>
        </div>

        <!-- 课件预览弹窗 -->
        <div class="lesson-preview-modal" v-if="showLessonCard">
          <div class="modal-content">
            <div class="modal-header">
              <h3>课件预览</h3>
              <button class="close-btn" @click="showLessonCard = false">×</button>
            </div>
            <div class="modal-body">
              <div class="loading-container" v-if="isLoading">
                <div class="loading-spinner"></div>
                <p>正在加载课件，请稍候...</p>
              </div>

              <div class="error-container" v-if="loadError">
                <div class="error-icon">!</div>
                <p>课件加载失败，请检查链接或稍后再试</p>
                <button class="retry-btn" @click="handleClick">重试</button>
              </div>

              <iframe
                :src="lessonCardUrl"
                class="lesson-card-preview"
                frameborder="0"
                @load="handleIframeLoad"
                @error="handleIframeError"
                v-show="!isLoading && !loadError"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新建课件表单弹窗 -->
    <el-dialog
      v-model="showCreateForm"
      title="新建课件"
      width="500px"
      custom-class="create-courseware-dialog"
    >
      <el-form :model="newCoursewareForm" label-width="80px" :rules="formRules" ref="createForm">
        <el-form-item label="课件名称" prop="coursewareName">
          <el-input v-model="newCoursewareForm.coursewareName" placeholder="请输入课件名称"></el-input>
        </el-form-item>

        <el-form-item label="所属章节" prop="chapterId">
          <el-select
            v-model="newCoursewareForm.chapterId"
            placeholder="请选择章节"
            style="width: 100%"
          >
            <el-option
              v-for="chapter in currentChapters"
              :key="chapter.id"
              :label="chapter.name"
              :value="chapter.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="资源类型" prop="resourceType">
          <el-radio-group v-model="newCoursewareForm.resourceType">
            <el-radio label="ppt">PPT文档</el-radio>
            <el-radio label="video">教学视频</el-radio>
            <el-radio label="pdf">PDF文档</el-radio>
            <el-radio label="doc">Word文档</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="上传文件" prop="resourceUrl">
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-success="handleUploadSuccess"
            :before-upload="beforeUpload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">支持PPT、PDF、Word和视频文件，大小不超过100MB</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="课件描述">
          <el-input
            type="textarea"
            :rows="3"
            v-model="newCoursewareForm.description"
            placeholder="请输入课件描述（可选）"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showCreateForm = false">取 消</el-button>
        <el-button type="primary" @click="submitNewCourseware">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 定义分类数据结构
interface CategoryItem {
  id: number
  name: string
  parentId: number
  path: string
  type: number
  createTime: string
  children?: CategoryItem[]
}

// 模拟数据
const mockData: CategoryItem[] = [
  {
    id: 1,
    name: "小学",
    parentId: 0,
    path: "1",
    type: 1,
    createTime: "2026-06-01",
    children: [
      {
        id: 101,
        name: "语文",
        parentId: 1,
        path: "1-101",
        type: 2,
        createTime: "2025-06-02",
        children: [
          {
            id: 1001,
            name: "一年级上学期",
            parentId: 101,
            path: "1-101-1001",
            type: 3,
            createTime: "2025-06-03",
            children: [
              {
                id: 10001,
                name: "拼音学习",
                parentId: 1001,
                path: "1-101-1001-10001",
                type: 4,
                createTime: "2025-06-04",
              },
              {
                id: 10002,
                name: "基础汉字",
                parentId: 1001,
                path: "1-101-1001-10002",
                type: 4,
                createTime: "2025-06-05",
              }
            ]
          }
        ]
      },
      {
        id: 102,
        name: "数学",
        parentId: 1,
        path: "1-102",
        type: 2,
        createTime: "2025-06-06",
        children: [
          {
            id: 1002,
            name: "一年级上学期",
            parentId: 102,
            path: "1-102-1002",
            type: 3,
            createTime: "2025-06-07",
            children: [
              {
                id: 10003,
                name: "数字认知",
                parentId: 1002,
                path: "1-102-1002-10003",
                type: 4,
                createTime: "2025-06-08",
              }
            ]
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: "初中",
    parentId: 0,
    path: "2",
    type: 1,
    createTime: "2025-06-01",
    children: [
      {
        id: 201,
        name: "物理",
        parentId: 2,
        path: "2-201",
        type: 2,
        createTime: "2025-06-02",
        children: [
          {
            id: 2001,
            name: "初二物理",
            parentId: 201,
            path: "2-201-2001",
            type: 3,
            createTime: "2025-06-03",
            children: [
              {
                id: 20001,
                name: "力学基础",
                parentId: 2001,
                path: "2-201-2001-20001",
                type: 4,
                createTime: "2025-06-04",
              }
            ]
          }
        ]
      }
    ]
  }
];

// 模拟课件数据
const mockCourseware = [
  {
    id: 1,
    chapterId: 10001,
    coursewareName: "拼音aoe教学",
    createTime: "2025-06-10T08:30:00",
    resourceUrl: "https://example.com/pinyin.pptx"
  },
  {
    id: 2,
    chapterId: 10001,
    coursewareName: "拼音声调练习",
    createTime: "2025-06-12T14:20:00",
    resourceUrl: "https://example.com/tone.pptx"
  },
  {
    id: 3,
    chapterId: 10003,
    coursewareName: "1-10数字认知",
    createTime: "2025-06-15T10:45:00",
    resourceUrl: "https://example.com/numbers.pptx"
  }
];

// 创建响应式变量
const popoverVisible = ref(false)
const lessonList = ref<CategoryItem[]>(mockData)
const coursewareList = ref<any[]>([])

// 侧边栏选择相关的变量
const selectedLevel = ref<number | null>(1)
const selectedSubject = ref<number | null>(101)
const selectedGrade = ref<number | null>(1001)
const selectedChapter = ref<number | null>(10001)
const selectedCourse = ref<number | null>(null)

// 章节展开状态
const expandedChapters = ref<Record<number, boolean>>({})
const chapterCoursesMap = ref<Record<number, any[]>>({})
const loadingCourses = ref(false)
const loadingChapterId = ref<number | null>(null)

// 课件预览相关
const showLessonCard = ref(false)
const isLoading = ref(false)
const loadError = ref(false)
const lessonCardUrl = ref('')

// 新建课件相关
const showCreateForm = ref(false)
const newCoursewareForm = ref({
  coursewareName: '',
  chapterId: null as number | null,
  resourceType: 'ppt',
  resourceUrl: '',
  description: ''
})

const formRules = ref({
  coursewareName: [
    { required: true, message: '请输入课件名称', trigger: 'blur' },
    { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  chapterId: [
    { required: true, message: '请选择所属章节', trigger: 'change' }
  ],
  resourceType: [
    { required: true, message: '请选择资源类型', trigger: 'change' }
  ],
  resourceUrl: [
    { required: true, message: '请上传课件文件', trigger: 'change' }
  ]
})

// 计算属性获取当前选择级别下的子项
const currentSubjects = computed(() => {
  if (!selectedLevel.value) return []
  const level = lessonList.value.find(item => item.id === selectedLevel.value)
  return level?.children || []
})

const currentGrades = computed(() => {
  if (!selectedSubject.value) return []
  const subject = currentSubjects.value.find(item => item.id === selectedSubject.value)
  return subject?.children || []
})

const currentChapters = computed(() => {
  if (selectedLevel.value && selectedLevel.value < 10) {
    if (!selectedGrade.value) return []
    const grade = currentGrades.value.find(item => item.id === selectedGrade.value)
    return grade?.children || []
  } else {
    if (!selectedSubject.value) return []
    const subject = currentSubjects.value.find(item => item.id === selectedSubject.value)
    return subject?.children || []
  }
})

// 处理选择事件
const handleLevelSelect = (id: number) => {
  selectedLevel.value = id
  selectedSubject.value = null
  selectedGrade.value = null
  selectedChapter.value = null
  coursewareList.value = []
}

const handleSubjectSelect = (id: number) => {
  selectedSubject.value = id
  selectedGrade.value = null
  selectedChapter.value = null
  coursewareList.value = []
}

const handleGradeSelect = (id: number) => {
  selectedGrade.value = id
  selectedChapter.value = null
  coursewareList.value = []
}

const handleChapterSelect = async (chapter: any) => {
  selectedChapter.value = chapter.id
  fetchCoursewareList(chapter.id)
}

// 切换章节展开状态
const toggleChapterExpand = async (chapterId: number) => {
  expandedChapters.value[chapterId] = !expandedChapters.value[chapterId]

  if (expandedChapters.value[chapterId] && !chapterCoursesMap.value[chapterId]) {
    loadingCourses.value = true
    loadingChapterId.value = chapterId

    setTimeout(() => {
      chapterCoursesMap.value[chapterId] = mockCourseware
        .filter(course => course.chapterId === chapterId)
        .map(course => ({
          id: course.id,
          coursewareName: course.coursewareName,
          title: course.coursewareName
        }))

      loadingCourses.value = false
      loadingChapterId.value = null
    }, 800)
  }
}

// 处理课程选择
const handleCourseSelect = async (course: any) => {
  selectedCourse.value = course.id
  coursewareList.value = mockCourseware.filter(item => item.id === course.id)
}

// 判断章节是否展开
const isChapterExpanded = (chapterId: number) => {
  return !!expandedChapters.value[chapterId]
}

// 获取所选年级名称
const getLevelName = () => {
  if (selectedLevel.value) {
    const level = lessonList.value.find(item => item.id === selectedLevel.value)
    return level ? level.name : '未选择'
  }
  return '未选择'
}

// 获取所选学科名称
const getSubjectName = () => {
  if (selectedSubject.value) {
    const subject = currentSubjects.value.find(item => item.id === selectedSubject.value)
    return subject ? subject.name : '未选择'
  }
  return '未选择'
}

// 获取课件列表
const fetchCoursewareList = (chapterId?: number) => {
  const directoryId = chapterId || selectedChapter.value
  if (!directoryId) return

  setTimeout(() => {
    coursewareList.value = mockCourseware.filter(item => item.chapterId === directoryId)
  }, 500)
}

// 格式化日期
const formatDate = (dateStr: string) => {
  return dateStr ? dateStr.split('T')[0] : '未知日期'
}

// 点击课件
const handleClick = (item: any) => {
  isLoading.value = true
  loadError.value = false
  lessonCardUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(item.resourceUrl)}`
  showLessonCard.value = true

  setTimeout(() => {
    isLoading.value = false
  }, 1500)
}

// 处理iframe加载完成
const handleIframeLoad = () => {
  isLoading.value = false
}

// 处理iframe加载失败
const handleIframeError = () => {
  isLoading.value = false
  loadError.value = true
}

// 判断是否显示课程或学期
const gradeDisplayText = computed(() => {
  return selectedLevel.value && selectedLevel.value < 10 ? '学期' : '课程'
})

// 文件上传成功处理
const handleUploadSuccess = (response: any, file: any) => {
  newCoursewareForm.value.resourceUrl = URL.createObjectURL(file.raw)
}

// 文件上传前校验
const beforeUpload = (file: any) => {
  const isLt100M = file.size / 1024 / 1024 < 100
  if (!isLt100M) {
    ElMessage.error('上传文件大小不能超过 100MB!')
    return false
  }
  return true
}

// 打开新建课件表单
const openCreateForm = () => {
  // 确保当前已选择章节
  if (currentChapters.value.length === 0) {
    ElMessage.error('请先选择年段、学科和学期')
    return
  }

  if (!selectedChapter.value) {
    selectedChapter.value = currentChapters.value[0].id
  }

  // 初始化表单数据
  newCoursewareForm.value = {
    coursewareName: '',
    chapterId: selectedChapter.value,
    resourceType: 'ppt',
    resourceUrl: '',
    description: ''
  }

  showCreateForm.value = true
}

// 提交新建课件
const submitNewCourseware = () => {
  // 表单验证
  if (!newCoursewareForm.value.coursewareName) {
    ElMessage.error('请输入课件名称')
    return
  }

  if (!newCoursewareForm.value.chapterId) {
    ElMessage.error('请选择所属章节')
    return
  }

  // 创建新课件
  const newId = Math.max(...mockCourseware.map(c => c.id), 0) + 1
  const newCourse = {
    id: newId,
    chapterId: newCoursewareForm.value.chapterId,
    coursewareName: newCoursewareForm.value.coursewareName,
    createTime: new Date().toISOString(),
    resourceUrl: newCoursewareForm.value.resourceUrl || 'https://example.com/new-courseware.pptx'
  }

  mockCourseware.push(newCourse)

  // 刷新当前课件列表
  if (selectedChapter.value === newCourse.chapterId) {
    fetchCoursewareList(selectedChapter.value)
  }

  // 关闭表单
  showCreateForm.value = false
  ElMessage.success('课件创建成功！')

  // 重置表单
  newCoursewareForm.value = {
    coursewareName: '',
    chapterId: null,
    resourceType: 'ppt',
    resourceUrl: '',
    description: ''
  }
}

// 组件挂载时初始化数据
onMounted(() => {
  // 初始加载默认章节的课件
  if (selectedChapter.value) {
    fetchCoursewareList(selectedChapter.value)
  }

  // 初始化章节课程映射
  chapterCoursesMap.value = {}

  // 初始化章节展开状态
  expandedChapters.value = {}
})
</script>

<style scoped>
.lesson-library-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}

.header-bar {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  color: white;
  padding: 15px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 100;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.header-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background: white;
  margin-right: 12px;
  border-radius: 2px;
}

.header-actions .el-button {
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.5);
  transition: all 0.3s ease;
}

.header-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.7);
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 280px;
  background-color: #fff;
  border-right: 1px solid #e8e8e8;
  overflow-y: auto;
  height: calc(100vh - 70px);
  padding: 15px;
  z-index: 10;
}

.content {
  flex: 1;
  padding: 24px;
  background-color: #f5f7fa;
  overflow-y: auto;
  height: calc(100vh - 70px);
}

.select-area {
  flex: 0 0 280px;
  margin-right: 20px;
}

.cascade-select {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
}

.cascade-header {
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  height: 20px;
  font-size: 14px;
}

.selected-path {
  color: #333;
  font-size: 14px;
}

.chapter-section {
  margin-top: 5px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  min-height: 250px;
  margin-bottom: 40px;
}

.chapter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.chapter-list {
  min-height: 600px;
  overflow-y: auto;
}

.chapter-wrapper {
  margin-bottom: 5px;
}

.chapter-item {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
  transition: all 0.3s;
}

.chapter-content {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 1;
}

.expand-icon {
  color: #409eff;
  font-size: 12px;
  transition: transform 0.3s;
  padding: 5px;
  border-radius: 50%;
  cursor: pointer;
}

.expand-icon:hover {
  background-color: #d9ecff;
}

.chapter-item:hover {
  background-color: #d9ecff;
  border-color: #409eff;
}

.chapter-item.active {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}

.course-list {
  margin-left: 25px;
  margin-top: 5px;
  border-left: 1px solid #e8e8e8;
  padding-left: 15px;
}

.course-item {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 13px;
  color: #606266;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 4px;
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
  margin-bottom: 5px;
  transition: all 0.3s;
}

.course-item:hover {
  background-color: #d9ecff;
  border-color: #409eff;
}

.course-loading,
.course-empty {
  padding: 10px;
  text-align: center;
  color: #909399;
  font-size: 13px;
}

.course-loading i {
  margin-right: 5px;
}

.lesson-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  overflow-x: auto;
  flex-direction: row;
  align-content: flex-start;
}

.lesson-card {
  flex: 0 0 250px;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  padding: 15px;
  text-align: center;
  border: 2px solid #409eff;
}

.lesson-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #66b1ff;
}

.lesson-icon {
  font-size: 48px;
  color: #409eff;
  margin-bottom: 15px;
}

.lesson-title {
  padding: 10px 0;
  font-size: 14px;
  font-weight: 500;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lesson-info {
  padding: 0 10px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.lesson-card-preview {
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: none;
}

.lesson-preview-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 80%;
  height: 80%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.modal-body {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 300px;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-radius: 50%;
  border-top: 5px solid #4080ff;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  min-height: 300px;
  color: #666;
}

.error-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ff6b6b;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
}

.retry-btn {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: #4080ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.retry-btn:hover {
  background-color: #3070e0;
}

.empty-state {
  padding: 20px 0;
  color: #909399;
  font-size: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.empty-state i {
  font-size: 24px;
  color: #c0c4cc;
}

@media (max-width: 1200px) {
  .lesson-card {
    flex: 0 0 220px;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 20px;
  }

  .select-area {
    flex: none;
    margin-bottom: 20px;
  }

  .lesson-card {
    flex: 0 0 180px;
  }
}
</style>

<style>
.cascade-popover {
  padding: 0;
  z-index: 2000 !important;
}

.el-popover__title {
  display: none;
}

.popover-content {
  padding: 15px;
}

.category-row {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.category-row:last-child {
  margin-bottom: 0;
}

.category-label {
  flex: 0 0 60px;
  color: #666;
  font-size: 14px;
  line-height: 32px;
}

.category-options {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.category-item {
  font-size: 14px;
  cursor: pointer;
  color: #606266;
  transition: all 0.3s;
  padding: 6px 15px;
  border-radius: 4px;
  background: #ecf5ff;
  border: 1px solid #b3d8ff;
  color: #409eff;
}

.category-item:hover {
  background-color: #d9ecff;
  border-color: #409eff;
}

.category-item.active {
  background-color: #409eff;
  color: #fff;
  border-color: #409eff;
}

.category-border {
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.create-courseware-dialog .el-dialog__header {
  background: linear-gradient(135deg, #409eff, #66b1ff);
  padding: 15px 20px;
  border-radius: 8px 8px 0 0;
}

.create-courseware-dialog .el-dialog__title {
  color: white;
  font-weight: 500;
}

.create-courseware-dialog .el-dialog__headerbtn .el-dialog__close {
  color: white;
}

.create-courseware-dialog .el-dialog__body {
  padding: 20px;
}

.create-courseware-dialog .el-form-item__label {
  font-weight: 500;
}

.create-courseware-dialog .el-upload-dragger {
  width: 100%;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #dcdfe6;
  border-radius: 6px;
  background-color: #f5f7fa;
}

.create-courseware-dialog .el-upload-dragger:hover {
  border-color: #409eff;
}

.create-courseware-dialog .el-upload__tip {
  margin-top: 10px;
  color: #909399;
  font-size: 12px;
}
</style>
